
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Mtons UI</title>

<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="../../dist/css/dashboard.css" rel="stylesheet">

<script src="../../depends/jquery.min.js"></script>
</head>

<body>
	<div class="container-fluid">

		<div class="row">
			<h2 class="sub-header">Resize</h2>

			<p>创建一个可调整大小的元素</p>
			<div class="table-responsive">
				<table class="table table-striped" style="width: 600px;">
					<tr>
						<th>方法</th>
						<th>说明</th>
					</tr>
					<tr>
						<td>minWidth</td>
						<td>最小宽度</td>
					</tr>
					<tr>
						<td>minHeight</td>
						<td>最小高度</td>
					</tr>
					<tr>
						<td>maxWidth</td>
						<td>最大宽度</td>
					</tr>
					<tr>
						<td>maxHeight</td>
						<td>最大高度</td>
					</tr>
					<tr>
						<td>edge</td>
						<td>距离边缘多少宽度的时候开始调整，单位是px</td>
					</tr>
					<tr>
						<td>disabled</td>
						<td>定义是否可以调整大小，true为禁止</td>
					</tr>
					<tr>
						<td>handles</td>
						<td>可调整的放向, 可选参数 'n, e, s, w, ne, se, sw, nw, all'</td>
					</tr>
					<tr>
						<td>onResizeStart</td>
						<td>function, 目标对象开始调整时触发</td>
					</tr>
					<tr>
						<td>onResize</td>
						<td>function, 目标对象调整时触发</td>
					</tr>
					<tr>
						<td>onResizeStop</td>
						<td>function, 目标对象结束调整时触发</td>
					</tr>
				</table>
			</div>
			
			<div>
				<h4>示例：</h4>
				<div style="height: 200px; z-index:999">
					<div id="resize" class="panel panel-default" style="width: 200px; height: 100px;">
						<div class="panel-heading">Panel heading without title</div>
						<div class="panel-body">Panel content</div>
					</div>
				</div>
				<pre>
var rz = new mtons.Resize($('#resize'), {minHeight: 50, minWidth: 50});
// 或
$('#resize').resize({minHeight: 50, minWidth: 50});
				</pre>
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="../../src/core.js"></script>
	<script type="text/javascript" src="../../src/resize.js"></script>
	<script type="text/javascript">
	$(function(){
		var rz = new mtons.Resize($('#resize'), {minHeight: 50, minWidth: 50});
	});
	</script>
</body>
</html>
